<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿死了餐厅</title>
    <link rel="stylesheet" href="/assets/css/Home.css">
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.min.css">
    <script src="/plugin/jquery-3.7.1.min.js"></script>
    <script src="/plugin/adminlte/js/popper.min.js"></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/axios.min.js"></script>
</head>
<body onload="load_foods(1)">
<div id="bar">
    <img class="top-img" src="/assets/img/HomeImg/logo.jpg" alt="标志" style="height: 50px">
    <ul class="top-bar">
        <li><a href="/user/Home">主页</a></li>
        <li><a href="/admin/login">商户中心</a></li>
        <li><a href="/user/login">用户中心</a></li>
        <li><a href="/user/UserHome">个人系统</a></li>
        <li><a href="#">我的足迹</a></li>
    </ul>
    <div class="headr-right">
        <label for="foodname" class="control-label">菜品</label>
        <input type="text" id="foodname" class="round-input" placeholder="请输入菜品">
        <img class="search-button" src="/assets/img/HomeImg/serach.png" alt="搜索">
        <a href="/user/UserOrder">
            <img class="search-button" src="/assets/img/HomeImg/cart.png" alt="购物车">
        </a>
        <img class="search-button" src="/assets/img/HomeImg/collection.png" alt="收藏">
        <img class="search-button" src="/assets/img/HomeImg/menu.png" alt="菜单">
    </div>
</div>
<img src="/assets/img/HomeImg/foodkun.jpg" alt="坤菜馆" style="width:100vw;height: 60vh">
<br>

<div id="content" style="width:100vw; padding-left: 180px">

</div>
<script>
    function load_foods(page){
        axios.get("/api/foods", {params: {
                page: page,
                size: 20
            }}).then(res=>{
            const list = res.data.records;
            bindDivData(list);
        })
    }
    function bindDivData(list){
        let html = '';
        for(let i in list){
            const food = list[i];
            html+=`
            <div class="card" style="width: 18rem; margin: 5px; float: left">
                <img src="${food.photo}" class="card-img-top" alt="..." style="height: 200px">
                <div class="card-body">
                    <h5 class="d-inline-block text-truncate" id="fname" style="max-width: 200px;">${food.foodname}</h5>
                    <p class="card-text" id="fprice" style="color: red">${food.price}</p>
                </div>
                <div class="card-footer">
                   <input  onclick="addorder()" type="button" value="加入购物车" class="btn btn-primary btn-login" STYLE="height: 40PX" >
                </div>
            </div>
            `;
        }
        document.getElementById("content").innerHTML = html;
    }
    function addorder(){
        let fname=document.querySelector('#fname');
        let ftext=fname.textContent;
        let fprice=document.querySelector('#fprice');
        let fpricetext=fprice.textContent;
      //  let pricetext=parseInt(fpricetext)
        const dataToAdd = {
            id:0,
            foodid: ftext,
            price: fpricetext
        }
        console.log(dataToAdd)
        axios.post("/api/user/Home", dataToAdd)
            .then(res=>{
                if(res.data==='ok'){
                    window.location.href = "/Home";

                }
            })
    }


</script>



</body>
</html>
